<html>  
<head>  
	<meta charset="utf-8">  
	<title>10.8.1 打包图</title>
	<style>
	.node {
		fill: rgb(150, 150, 150);
		fill-opacity: 0.25;
		stroke: black;
		stroke-width: 2px;
	}
	
	.leafnode {
		fill: rgb(255, 180, 0);
		fill-opacity: 1;
	}
	
	.nodeText {
		fill: black;
		font-size: 14px;
		font-family: simsun;
		text-anchor: middle;
	}
	</style>
</head> 
<body>
<script src="../../d3/d3.min.js"></script>
<script>
	var width  = 800;	//SVG绘制区域的宽度
	var height = 800;	//SVG绘制区域的高度
			
	var svg = d3.select("body")			//选择<body>
				.append("svg")			//在<body>中添加<svg>
				.attr("width", width)	//设定<svg>的宽度属性
				.attr("height", height);
	
	//1. 确定初始数据
	//数据保存于city.json中
	
	//2. 转换数据
	var pack = d3.layout.pack()
	    		.size([ width, height ])
	    		.radius(30)
				.padding(5);
	
	
	d3.json("city.json", function(error, root) {
		
		var nodes = pack.nodes(root);
		var links = pack.links(nodes);
		
		console.log(nodes);
		console.log(links);
		
		//3. 绘制
		var color = d3.scale.category20c();
		
		svg.selectAll("circle")
			.data(nodes)
			.enter()
			.append("circle")
			.attr("class",function(d) { return d.children ? "node" : "leafnode"; })
			.attr("cx",function(d){ return d.x; })
			.attr("cy",function(d){ return d.y; })
			.attr("r",function(d){ return d.r; });
		
		svg.selectAll("text")
			.data(nodes)
			.enter()
			.append("text")
			.attr("class","nodeText")
			.style("fill-opacity",function(d){
				return d.children ? 0 : 1;
			})
			.attr("x",function(d){ return d.x; })
			.attr("y",function(d){ return d.y; })
			.attr("dy",".3em")
			.text(function(d){ return d.name; });
		
	});

</script>
	
</body>  
</html>  